import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import { SUNNY_KITCHEN_INF0 } from 'Constants/config';
import { BROWSER_MODE } from 'Constants/webConstants';
import TitleButton from 'Component/Page/Components/TitleButton';
import './sunKitchen.scss';
import Api from '../../../../utils/api';


class SunKitchen extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      record: {},
      detailInfo: {}
    };
    this.insertObj = ::this.insertObj;
  }
  componentWillUnmount() {
    preview.StopPreview(-1); //关闭所有窗口
  }
  componentDidMount() {
    this.insertObj();
    this.initDataDetail();
  }
  initDataDetail() {
    const api = new Api({
      method: 'GET',
      path: `/enterprise_details/enterprise_info/${this.props.params.id}`,
      success: (res) => {
        console.log('res', res);
        this.setState({
          detailInfo: res
        }, () => {
          this.setInit();
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  insertObj() {
    console.log('insert obj');
    document.getElementById('parent').innerHTML = `
  <object classid="clsid:BE020CC9-521F-4641-85E1-3B631B7ADDD9" id="preview" width="100%" height="100%"  name="preview" >
       <PARAM NAME="Ip" VALUE="60.12.65.115"/>
       <PARAM  NAME="UserName " VALUE="admin"/>
       <PARAM  NAME="PrivilegeCode" VALUE="0401,0402,"/>
    </object> `;
  }

  setInit() {
    console.log('login hk');
    const param = `
    <?xml version="1.0" encoding="utf-8"?><LoginInfo><LoginType>2</LoginType><SynLogin>1</SynLogin><IP>${SUNNY_KITCHEN_INF0.ServerIP}</IP><Port>${SUNNY_KITCHEN_INF0.Port}</Port><UserName>${SUNNY_KITCHEN_INF0.UserName}</UserName><Password>${SUNNY_KITCHEN_INF0.PWD}</Password></LoginInfo>`;
    const res = preview.LoginPlat(param);
    preview.SetLayoutType(1); // 设置窗格数
    if (res !== 0) {
      console.log('登录海康失败');
    } else {
      console.log('login hk success');
    }
  }
  renderList(data) {
    if (!data) {
      return '';
    }
    const nodeInfo = [];
    for (let i = 0, len = data.length; i < len; i++) {
      const classState = data[i].on_line === 1 ? 'item-unactive' : 'item-error';
      const imgState = data[i].on_line === 1 ? 'images/horizonImg/icon_camera_normal.png' : 'images/horizonImg/icon_camera_off.png';
      nodeInfo.push((
        <div
          key={data[i].camera_code}
          className={this.state.record.camera_code === data[i].camera_code ? 'sun-kitchen-item item-active' : `sun-kitchen-item ${classState}`}
          onClick={this.handleCamera.bind(this, data[i])}
        >
          <div className="label">
            {data[i].name}
          </div>
          <div className="sun-kitchen-camera">
            <img src={this.state.record.camera_code === data[i].camera_code ? 'images/horizonImg/icon_camera_light.png' : `${imgState}`} alt="摄像头" />
          </div>
        </div>
      ));
    }
    return nodeInfo;
  }
  handleCamera(camera) {
    console.log(camera.camera_code);
    if (camera.on_line !== 1) {
      return;
    }
    const _param = `<?xml version="1.0" encoding="UTF-8"?><Preview><CamIndexCode>${camera.camera_code}</CamIndexCode></Preview>`;
    const previewRes = preview.StartPreview(_param);
    console.log(previewRes);
    if (previewRes === 0) {
      this.setState({
        record: camera
      });
    }
  }
  render() {
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    const { detailInfo } = this.state;
    if (isVertical) {
      return (
        <div className="v-sun-kitchen-page">
          <div className="sun-kitchen-wrap">
            <TitleButton title="阳光厨房" />
            <div className="sun-kitchen-videos">
              <div className="sun-kitchen-play" id="parent" />
              <div className="sun-kitchen-list">
                {
                  this.renderList && this.renderList(detailInfo.sun_kitchens)
                }
              </div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <div className="sun-kitchen-page">
        <div className="sun-kitchen-wrap">
          <TitleButton title="阳光厨房" />
          <div className="sun-kitchen-videos">
            <div className="sun-kitchen-play" id="parent" />
            <div className="sun-kitchen-list">
              {
                this.renderList && this.renderList(detailInfo.sun_kitchens)
              }
            </div>
          </div>
          {/*<div className="sun-kitchen-foot">
          <span>企业名称:{ detailInfo.name || ''}</span>
          <span>地址:{ detailInfo.address || ''}</span>
        </div>*/}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(SunKitchen);
